<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03_计数器</title>
</head>
<!-- 
    在前端开发中,我们需要经常用于交互实现一些功能,这时,我们就必须监听用户发生的时间,比如点击、拖拽、键盘事件等.
    在 vue 中如何监听事件呢?使用 v-on 指令
-->

<body>
    <!-- 
        需求:实现一个计数器
        获取元素,点击加号按钮值加,点击减号按钮值减
     -->
    <p id="counter">0</p>
    <button onclick="add()">+</button>
    <button onclick="jian()">-</button>

    <h3>------------------------------------------</h3>
    <!-- vue方式实现计数器 -->
    <div id="app">
        <h3>{{number}}</h3>
        <button v-on:click="increment">+</button>
        <button v-on:click="decrement">-</button>
    </div>

</body>
<script src="../vue.js"></script>
<script>
    // 传统 js 方式实现一个计数器 
    var counter = document.getElementById("counter").innerText

    function add() {
        counter++
        document.getElementById("counter").innerText = counter
    }

    function jian() {
        counter--
        document.getElementById("counter").innerText = counter
    }

    const vm = new Vue({
        el: '#app', //1.找打要操作的容器交给 vue 管理
        data: { //2.数据初始化
            number: 0
        },
        methods: {
            increment() {
                this.number++
            },
            decrement() {
                this.number--
            }
        }
    })
</script>

</html>